<template>
    <router-link :to="{name: 'train-detail', params:{id: itemData.trainId}}" class="train-item" >
        <div class="cover" :style="{backgroundImage:`url(${itemData.imageUrl})`}"></div>
        <div class="content-box">
            <div class="title">{{itemData.name}}</div>
            <div class="time">时间：{{itemData.trainTime}}</div>
            <div class="address">地址：{{itemData.address}}</div>
        </div>
    </router-link>
</template>

<script>
export default {
  name: 'train-item',
  props: {
    itemData: Object
  }
}
</script>

<style scoped lang="less">
.train-item{
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
  border-radius: 5px;
  margin: 12px;
  padding: 8px;

  .cover{
    width: 209/2px;
    height: 158/2px;
    flex: 0 0 209/2px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  .content-box{
    flex: 1;
    width: 0;
    margin-left: 12px;
    font-size: 22/2px;
    color: #484848;
    line-height: 14px;
  }
  .title {
      font-size: 28/2px;
      line-height: 34/2px;
      color: #353434;
      margin: 0;
      font-weight: bold;
      .line-overflow(2);
    }
  .time{
    font-size: 11px;
    color: #6C6C6C;
    margin-top: 10px;
  }
  .address{
    font-size: 11px;
    color: #6C6C6C;
    margin-top: 5px;
  }
}
</style>
